<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
  
<div id="app">
    <p>
        全选：
    </p>
    <input type="checkbox" @change="singleChecked" :value="item.gccid" v-model="checkedCode" />
    <input type="checkbox" id="checkbox" v-model="checked" @click="changeAllChecked()">
    <label for="checkbox">
        {{checked}}
    </label>
    <p>
        多个复选框：
    </p>
    <input type="checkbox" id="uuihoo" value="uuihoo" v-model="checkedNames">
    <label for="uuihoo">
        uuihoo
    </label>
    <input type="checkbox" id="google" value="Google" v-model="checkedNames">
    <label for="google">
        Google
    </label>
    <input type="checkbox" id="alibaba" value="alibaba" v-model="checkedNames">
    <label for="alibaba">
        taobao
    </label>
    <br>
	<span>
		选择的值为:{{checkedNames}}
	</span>
</div>
<script>
    new Vue({
	el: '#app',
	data: {
		checked: false,    // 正在进行中的数据是否被选中
		checkedNames: [], // 用于保存被选中的数据
		checkedArr: ["uuihoo", "alibaba", "Google"]
	},
	methods: {
		changeAllChecked: function() {
			if (this.checked) {
				this.checkedNames = this.checkedArr
			} else {
				this.checkedNames = []
			}
		}
	},
	watch: {
		"checkedNames": function() {
			if (this.checkedNames.length != this.checkedArr.length) {
				this.checked = false
			} else {
				this.checked = true
			}
		},
        // 用户单选
      singleChecked: function(){
        //判断每一个CheckBox是否选中，全选中让全选按钮选中
        if(this.personList.length == this.checkedCode.length){ 
            this.isAllChecked = true;
        }else{  // 只要有一个checkbox不选中，让全选按钮不选中
            this.isAllChecked = false;
        }
      },
 
      // 用户全选
      chooseAll: function(e){
        var that = this;
        if(that.checkedCode.length !== 0){          
          that.checkedCode = [];
        }
        if(that.isAllChecked){
          that.personList.forEach(function(singlePersonList){
            that.checkedCode.push(singlePersonList.code)
          },that)
        }else{
          that.checkedCode = [];
        }
      },
	}
})
</script>
</body>
</html>
